<template>
	<view class="page">
		<!-- 场馆信息 -->
		<view class="gym-info">
			<wd-icon name="location" color="#666" size="16px"></wd-icon>
			<text class="gym-name">场馆：{{venueName || ''}}</text>
		</view>
		
		<!-- Tab筛选 -->
		<view class="tab-container">
			<view 
				class="tab-item" 
				:class="{ active: currentTab === index }"
				v-for="(tab, index) in tabList" 
				:key="index"
				@click="changeTab(index)"
			>
				<text class="tab-text">{{ tab.name }}</text>
				<text class="tab-count">({{ tab.count }})</text>
			</view>
		</view>
		
		<!-- 提示信息 -->
		<view class="notice">
			<wd-icon name="warning" color="#ff6b35" size="14px"></wd-icon>
			<text class="notice-text">{{ tabList[currentTab].name }}不支持退款</text>

		</view>
		
		<!-- 日期筛选 -->
		<view class="date-container">
			<view 
				class="date-item" 
				:class="{ active: currentDate === index }"
				v-for="(date, index) in dateList" 
				:key="index"
				@click="changeDate(index)"
			>
				<text class="date-text">{{ date.date }}</text>
			</view>
		</view>
		
		<!-- 课程列表 -->
		<view class="course-list">
			<view 
				:class="{'course-item':classType==1,'course-item2':classType!=1}" 
				v-for="(course, index) in courseList" 
				:key="index"
			>
				<template v-if="classType==1">
					<view class="course-left">
					<image class="coach-avatar" :src="course.faceImgUrl" mode="aspectFill"></image>
					<view class="course-info">
						<view class="course-title">教练:{{ course.name || '' }}</view>
						<view class="coach-phone">教练电话:{{ course.mobile || '无' }}</view>
						<view class="course-time">上课时间:{{ formatTimeRange(course.workStartAt, course.workEndAt) }}</view>
					</view>
					</view>
					<view class="course-right">
						<view class="course-price">¥ {{ course.teachPrice || '0' }}/节</view>
						<view class="book-btn" @click="bookCourse(course)">预约</view>
					</view>
				</template>
				<template v-else>
					<image class="course-bg" :src="course.cover || '/static/img/vip_bg.png'" mode=""></image>
					<view class="course-content" @click="toDedetail(course)">
						<view class="course-header">
							<view class="course-title">{{ course.title || '' }}</view>
							<!-- <view class="course-tags">
								<view class="tag">轻松动起来</view>
								<view class="tag">线条塑形</view>
							</view> -->
						</view>
						<view class="course-info">
							<view class="coach-info">教练：{{ course?.venueUserEntity?.name || '' }}</view>
							<view class="coach-phone">教练电话：{{ course?.venueUserEntity?.mobile || '' }}</view>
							<view class="course-time">上课时间：{{ formatTimeRange(course?.startAt, course?.endAt) }}</view>
						</view>
						<view class="course-price2">¥{{ course.price || '140' }}/节</view>
					</view>
				</template>
			</view>
		</view>
		<wd-status-tip v-if="courseList.length == 0 && !loadActive" image="/static/viewNull.png"  :image-size="{ height: 50,  width: 50}" tip="暂无内容" />
		<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
	</view>
</template>

<script setup>
	
	// Tab筛选数据配置
	const tabList = ref([
		{ name: '私教课', count: '1对1' },   // 私人教练课程，一对一教学
		{ name: '团教课', count: '8人' },   // 小团体课程，6人一组
		{ name: '团操课', count: '20人' }   // 大团体操课，20人一组
	])
	const currentTab = ref(0) // 当前选中的Tab索引，默认选中第一个（私教课）
	// 日期筛选数据 - 显示最近一周的日期
	const dateList = ref([]) // 存储日期列表，格式：[{date: '08-07', fullDate: Date对象}]
	const currentDate = ref(0) // 当前选中的日期索引，默认选中第一个（今天）
	const venueId = ref('');
	const venueName = ref('');
	const loadActive = ref(false);
	const selectedDate = ref(''); //日期默认
	const dateType = ref(1); //日期默认
	const classType = ref(1);//类型默认
	
	
	// 课程列表数据 - 模拟数据，实际应从API获取
	const courseList = ref([])
	
	/**
	 * ==================== 方法定义 ====================
	 */
	
	/**
	 * 格式化时间，提取小时和分钟
	 * @param {string} timeString - 时间字符串，格式如：'2025-08-11 22:00:37'
	 * @returns {string} 格式化后的时间，如：'22:00'
	 */
	const formatTime = (timeString) => {
		if (!timeString) return '';
		
		try {
			// 如果已经是 HH:MM 格式，直接返回
			if (/^\d{2}:\d{2}$/.test(timeString)) {
				return timeString;
			}
			
			// 处理完整的日期时间格式
			const date = new Date(timeString);
			if (isNaN(date.getTime())) {
				// 如果无法解析为日期，尝试提取时间部分
				const timeMatch = timeString.match(/(\d{2}):(\d{2})/);
				if (timeMatch) {
					return `${timeMatch[1]}:${timeMatch[2]}`;
				}
				return timeString; // 返回原始字符串
			}
			
			// 格式化为 HH:MM
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${hours}:${minutes}`;
		} catch (error) {
			console.error('时间格式化错误:', error);
			return timeString; // 出错时返回原始字符串
		}
	}
	
	/**
	 * 格式化时间范围
	 * @param {string} startTime - 开始时间
	 * @param {string} endTime - 结束时间
	 * @returns {string} 格式化后的时间范围，如：'22:00-23:00'
	 */
	const formatTimeRange = (startTime, endTime) => {
		const formattedStart = formatTime(startTime);
		const formattedEnd = formatTime(endTime);
		return `${formattedStart}-${formattedEnd}`;
	}
	
	/**
	 * 初始化日期列表数据
	 * 生成从今天开始的连续7天日期
	 */
	const initDateList = () => {
		const dates = []
		const today = new Date() // 获取当前日期
		// 循环生成7天的日期数据
		for (let i = 0; i < 7; i++) {
			const date = new Date(today) // 创建新的日期对象，避免修改原始日期
			date.setDate(today.getDate() + i) // 设置为今天+i天
			
			// 格式化月份和日期，确保两位数显示（如：08-07）
			const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1
			const day = String(date.getDate()).padStart(2, '0')
			
			// 添加到日期列表
			dates.push({
				date: `${month}-${day}`, // 显示格式：MM-DD
				fullDate: date // 完整的日期对象，用于后续处理
			})
		}
		dateList.value = dates
		currentDate.value = 0 // 默认选中今天（第一个日期）
		selectedDate.value = dateList.value[0].date;

	}
	
	/**
	 * 切换Tab标签
	 * @param {number} index - Tab的索引（0:私教课, 1:团教课, 2:团操课）
	 */
	const changeTab = (index) => {
		currentTab.value = index;
		courseList.value = [];
		if(index==0){//私教课
			classType.value = 1;
			// 保持当前选中的日期，不重置
			loadCourseData();
		}else{//团教课 或者 团操
			classType.value = index+1;
			// 保持当前选中的日期，不重置
			loadCourseData2();
		}
		// 切换Tab后重新加载对应的课程数据
	}
	
	/**
	 * 切换选中的日期
	 * @param {number} index - 日期的索引
	 */
	const changeDate = (index) => {
		currentDate.value = index;
		const selectedDateItem = dateList.value[index];
		selectedDate.value = selectedDateItem.date;
		
		dateType.value = index+1;
		// 切换日期后重新加载对应日期的课程数据
		courseList.value = [];
		if(classType.value==1){
			loadCourseData()
		}else{
			loadCourseData2()
		}

	}
	
	/**
	 * 加载课程数据
	 * 根据当前选中的Tab和日期加载对应的课程列表
	 */
	const loadCourseData = () => {
		loadActive.value = true;
		uni.api.getPrivateTrainersList({
			classType:1, //私教
			dateType:dateType.value,//1=今天；2=明天 ；3后天 4 5 6 7 往后延伸
			venueId:venueId.value,
		}).then(res => {
		  if (res.code == 0) {
			courseList.value = res.data || [];
		  }
		  loadActive.value = false;
		});
	}
	// 团教课
	const loadCourseData2 = () => {
		loadActive.value = true;
		uni.api.getTeamClassList({
			classType:classType.value, //2=团教课；3=团操
			dateType:dateType.value,//1=今天；2=明天 ；3后天 4 5 6 7 往后延伸
			venueId:venueId.value,
		}).then(res => {
		  if (res.code == 0) {
			courseList.value = res.data || [];
		  }
		  loadActive.value = false;
		});
	}
	
	/**
	 * 预约课程-进入详情selectedDate
	 * @param {Object} course - 课程信息对象
	 */
	const bookCourse = (course) => {
		const param = {
			id:course.id,
			selectedDate:selectedDate.value,
			dateType:dateType.value,
			venueId:venueId.value,
		}
		uni.navigateTo({
			url: `/pagesA/view/course/timeCourse?param=${JSON.stringify(param)}`
		})
	}
	
	// 详情
	const toDedetail = (course) => {
		uni.navigateTo({
			url: `/pagesA/view/course/courseDetails?businessId=${course.id}`
		})
	}
	/**
	 * ==================== 生命周期 ====================
	 */
	onLoad((opt) => {
		venueId.value = opt.id; // 场馆ID
		venueName.value = opt.name; // 场馆名称
		// 初始化日期列表
		initDateList()
		// 加载初始课程数据
		loadCourseData()
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 0;
	}

	// 场馆信息
	.gym-info {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		
		.gym-name {
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	// Tab筛选
	.tab-container {
		display: flex;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
			margin: 0 8rpx;
			border-radius: 8rpx;
			transition: all 0.3s ease;
			background: #f3f3f3;
			&.active {
				background-color: #000;
				
				.tab-text {
					color: #fff;
					font-weight: 600;
				}
				
				.tab-count {
					color: #fff;
				}
			}
			
			.tab-text {
				font-size: 32rpx;
				color: #999;
				margin-right: 8rpx;
			}
			
			.tab-count {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	// 提示信息
	.notice {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		
		.notice-text {
			margin-left: 8rpx;
			font-size: 24rpx;
			color: #ff6b35;
		}
	}

	// 日期筛选
	.date-container {
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		
		.date-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16rpx 0;
			border-radius: 8rpx;
			margin: 0 8rpx;
			
			&.active {
				background-color: #000;
				
				.date-text {
					color: #fff;
				}
			}
			
			.date-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	// 课程列表
	.course-list {
		padding: 0 30rpx;
		
		.course-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
			
			.course-left {
				display: flex;
				align-items: center;
				flex: 1;
				
				.coach-avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 24rpx;
				}
				
				.course-info {
					flex: 1;
					.course-title {
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 12rpx;
					}
					
					.coach-phone {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 8rpx;
					}
					
					.course-time {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
			
			.course-right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				
				.course-price {
					font-size: 32rpx;
					color: #ff6b35;
					font-weight: 600;
					margin-bottom: 16rpx;
				}
				
				.book-btn {
					background-color: #000;
					color: #fff;
					padding: 12rpx 32rpx;
					border-radius: 24rpx;
					font-size: 26rpx;
				}
			}
		}
		.course-price2 {
			font-size: 32rpx;
			color: #ff6b35;
			font-weight: 600;
			margin-bottom: 16rpx;
			margin-top: 10rpx;
		}
		.course-item2{
			position: relative;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
			overflow: hidden;
			height: 300rpx;
			
			.course-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			
			.course-content {
				position: relative;
				z-index: 2;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 30rpx;
				background-color: rgba(0, 0, 0, 0.5);
				height: 100%;
				box-sizing: border-box;
				color: #fff;
				cursor: pointer;
				
				.course-header {
					// margin-bottom: 20rpx;
					
					.course-title {
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 16rpx;
						color: #fff;
					}
					
					.course-tags {
						display: flex;
						gap: 12rpx;
						
						.tag {
							background-color: rgba(255, 255, 255, 0.2);
							padding: 8rpx 16rpx;
							border-radius: 20rpx;
							font-size: 22rpx;
							color: #fff;
							border: 1rpx solid rgba(255, 255, 255, 0.3);
						}
					}
				}
				
				.course-info {
					flex: 1;
					
					.coach-info {
						font-size: 26rpx;
						color: #fff;
						margin-bottom: 8rpx;
					}
					
					.coach-phone {
						font-size: 26rpx;
						color: #fff;
						margin-bottom: 8rpx;
					}
					
					.course-time {
						font-size: 26rpx;
						color: #fff;
					}
				}
				
				.course-price {
					font-size: 36rpx;
					color: #ff6b35;
					font-weight: bold;
					align-self: flex-end;
					margin-top: 16rpx;
				}
			}
		}
	}
</style>